<!-- v-for练习:实现点击删除 -->
<script setup lang="ts">
import { ref } from 'vue'

const list = ref([
  { id: 1, name: '《红楼梦》', author: '曹雪芹' },
  { id: 2, name: '《西游记》', author: '吴承恩' },
  { id: 3, name: '《水浒传》', author: '施耐庵' },
  { id: 4, name: '《三国演义》', author: '罗贯中' },
])

//删除函数
const del = (id: number) => {
  //保留当前项
  list.value = list.value.filter((item) => item.id != id)

  // 方法2:
  // 使用findIndex先找到id的下标
  // 在使用splice删除
  // const index = list.value.findIndex(item=>item.id == id)
  // list.value.splice(index,1)
}
</script>

<template>
  <div id="app">
    <h3>小黑的书架</h3>
    <ul>
      <li v-for="item in list" :key="item.id">
        <span>{{ item.name }}</span>
        <span>{{ item.author }}</span>
        <!-- 基于id进行删除 -->
        <button @click="del(item.id)">删除</button>
        <!-- 基于index进行删除 -->
        <!-- <button @click="list.splice(index,1)">删除</button> -->
      </li>
    </ul>
  </div>
</template>

<style></style>
